<template>
    <view class="mine-page">
        <view class="mine-info-user">
            <view class="title">
                HI,
                <span v-if="storage.get('name')">{{storage.get("name")}}</span>
                <open-data type="userNickName" v-else></open-data>
            </view>
            <view class="subtitle">
                账号:{{storage.get("openid")}}
            </view>
            <view class="setting">
                <u-icon name="setting" size="36rpx" color="#FFFFFF"></u-icon>
            </view>
        </view>
        <view class="mine-main">
            <view class="card">
                <u-grid :border="false" col="5">
                    <u-grid-item @click="nav(`/subpackage/order/pages/purchanse/list?orderStatus=0`)">
                        <up-badge type="error" max="999" :value="count.waitPayCount" bgColor="#FC3247" absolute :offset="[5,0]"></up-badge>
                        <icon-daizhifupayment size="60"></icon-daizhifupayment>
                        <text class="grid-text">待付款</text>
                    </u-grid-item>
                    <u-grid-item @click="nav(`/subpackage/order/pages/purchanse/list?orderStatus=1`)">
                        <up-badge type="error" max="999" :value="count.waitSendCount" bgColor="#FC3247" absolute :offset="[5,0]"></up-badge>
                        <icon-daishenhe size="60"></icon-daishenhe>
                        <text class="grid-text">待发货</text>
                    </u-grid-item>
                    <u-grid-item @click="nav(`/subpackage/order/pages/purchanse/list?orderStatus=2`)">
                        <up-badge type="error" max="999" :value="count.waitTakeCount" bgColor="#FC3247" absolute :offset="[5,0]"></up-badge>
                        <icon-fahuozhongorder size="60"></icon-fahuozhongorder>
                        <text class="grid-text">待收货</text>
                    </u-grid-item>
                    <u-grid-item @click="nav(`/subpackage/order/pages/purchanse/list?orderStatus=5`)">
                        <up-badge type="error" max="999" :value="count.afterSales" bgColor="#FC3247" absolute :offset="[5,0]"></up-badge>
                        <icon-yichangrenwushu size="60"></icon-yichangrenwushu>
                        <text class="grid-text">退换/售后</text>
                    </u-grid-item>
                    <u-grid-item @click="nav(`/subpackage/order/pages/purchanse/list`)">
                        <icon-dingdan size="60" color="#FC3247"></icon-dingdan>
                        <text class="grid-text">我的订单</text>
                    </u-grid-item>
                </u-grid>
            </view>
            <view class="card">
                <u-grid :border="false" col="3">
                    <u-grid-item>
                        <view class="number">999</view>
                        <view class="name">优惠券</view>
                    </u-grid-item>
                    <u-grid-item>
                        <view class="number">{{count.collectCount}}</view>
                        <view class="name">商品收藏</view>
                    </u-grid-item>
                    <u-grid-item @click="nav(`/subpackage/order/pages/browsing-history/list`)">
                        <view class="number">{{count.browsingHistoryCount>999?'999+':count.browsingHistoryCount}}</view>
                        <view class="name">浏览记录</view>
                    </u-grid-item>
                </u-grid>
            </view>
            <view class="card">
                <u-grid :border="false" col="4">
                    <u-grid-item>
                        <button open-type="contact" class="contact">
                            <icon-lianxikefu size="60"></icon-lianxikefu>
                            <text class="grid-text">在线客服</text>
                        </button>
                    </u-grid-item>
                </u-grid>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { storage } from '@/libs/storage'
import { get } from "@/libs/request"
import { onShow } from "@dcloudio/uni-app";
import { nav } from "@/libs/utils"
const count = ref<{
    afterSales:number,
    collectCount:number,
    waitPayCount:number,
    waitSendCount:number,
    waitTakeCount:number,
    browsingHistoryCount:number,
}>({
    afterSales: 0,
    collectCount: 0,
    waitPayCount: 0,
    waitSendCount: 0,
    waitTakeCount: 0,
    browsingHistoryCount:0,
});
/**
 * 获取统计数量
 */
const getCount = ()=>{
    get("user/getCount").then((res:any)=>{
        count.value = res.data;
    })
};
onShow(()=>{
    getCount();
})
</script>

<style scoped lang="less">
.mine-page{
    height: 100vh;
    background: #f7f7f7;
    overflow: auto;
    .mine-info-user{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        height: 170rpx;
        position: relative;
        background: #FC3247;
        padding: 0 30rpx;
        box-sizing: border-box;
        .title{
            font-size: 40rpx;
            color: #FFFFFF;
            font-weight: 500;
        }
        .subtitle{
            font-size: 25rpx;
            color: #FFC5C6;
            margin-top: 20rpx;
        }
        .setting{
            position: absolute;
            right: 30rpx;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .mine-main{
        margin-top: 40rpx;
        padding: 0 20rpx 20rpx;
        position: relative;
        z-index: 20;
        .card{
            border-radius: 20rpx;
            overflow: hidden;
            margin-top: 20px;
            background: #FFFFFF;
            :deep(.u-grid-item){
                padding: 10px 0;
            }
            .grid-text{
                color: #666666;
                font-size: 12px;
                margin: 8px 0 0 0;
            }
            .number{
                font-size: 36rpx;
                font-weight: bold;
            }
            .name{
                color: #666666;
                font-size: 14px;
            }
        }
    }
    .contact{
        display: flex;
        flex-flow: column;
        align-items: center;
    }
}
</style>